<template>
  <div id="main" style="height:500px;width: 100%;" ref="main"></div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  data() {
    return { }
  },
  props: {
    finalScore: {
        type: Array,
        default: 0,
    },
    QMin: {
      type: String,
      default: 0,
    }
  },
  mounted() { this.drawLine() },
  methods: {
    drawLine() {
      console.log(this.finalScore);
      const myChart = echarts.init(this.$refs.main); 
      let figureData = []
      let data = []
      let dataName = []

      let obj = {}
      let max_score = []
      let key = Object.keys(this.finalScore[0])
      for(let i = 0; i < this.finalScore.length; i++){
        max_score.push(Number.MIN_SAFE_INTEGER)
        for(let k of key){
          max_score[i] = Math.max(max_score[i], this.finalScore[i][k])
          Array.isArray(obj[k]) ? obj[k].push(this.finalScore[i][k]) : obj[k] = [this.finalScore[i][k]]
        }
      }
      for(let k of key){ 
        dataName.push(k)
        data.push({ name: k, value: obj[k], }) 
      }
      for(let i = 0; i < this.finalScore.length; i++){
        figureData.push({
          name: 'Q' + (Number(this.QMin) + i),
          max: max_score[i],
        })
      }

      let option = {
        legend: { data: dataName, },
        tooltip: {
          show: true,
          trigger: 'item',
        },
        radar: { indicator: figureData, },
        series: [
          {
            type: 'radar',
            label: { show: false, },
            areaStyle: {},
            animationDuration: 3000,
            data: data,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
 
<style>
</style>